<template>
	<view class="static">
		<view class="top relative">
			<view class="bg w100 h100"></view>
			<view class="info w100 h100">
				<picker mode="date" fields="month" @change="bindDateChange">
					<view class="uni-input">{{time}}</view>
					<text class="iconfontPT icondown1 down"></text>
				</picker>
				<view class="shopInfo">
					总计{{order_nums}}个订单，{{goods_nums}}件商品
				</view>
				<view class="money">
					共计:￥<text>{{bonus_money}}</text>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="year">
				<view class="monthlist">
					<view class="monthMsg">
						<view class="title">
							商品统计
						</view>
					</view>
					<view class="statisList" v-for="(i,d) in statisList" :key='d'>
						<view class="list">
							<view class="name">
								<text>{{i.title}}</text>
								<text>
									+{{i.income}}</text>
							</view>
							<view class="time">
								数量：{{i.num}}
							</view>
						</view>
					</view>

					<view class="monthMsg">
						<view class="title">
							其他
						</view>
					</view>
					<view class="statisList">
						<view class="list">
							<view class="name">
								<text>优惠券</text>
								<text>-{{district.district_price}}</text>
							</view>
							<view class="time">
								数量：{{district.district_nums}}
							</view>
						</view>
					</view>
					<view class="statisList">
						<view class="list">
							<view class="name">
								<text>服务费</text>
								<text>
									-{{service.servi_price}}</text>
							</view>
							<view class="time">
								次数：{{service.servi_nums}}
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		bonusCounts
	} from "../../../apis/shop/api.js"
	export default {
		data() {
			return {
				store_id: "",
				token: "",
				statisList: [],
				time: '',
				goods_nums: 0,
				order_nums: 0,
				bonus_money: 0,
				district: "",
				service: "",
			}
		},
		computed:{
			host(){
				return this.$baseHost.qiniuHost
			}
		},
		onLoad(option) {
			this.store_id = uni.getStorageSync("store_id");
			this.token = uni.getStorageSync("token");
			this.time = option.time
			this.getList()
		},
		methods: {
			bindDateChange(e) {
				console.log(e.target)
				this.time = e.target.value;

				this.getList()
			},
			getList() {
				let that = this
				bonusCounts({
					store_id: that.store_id,
					token: that.token,
					yearMoth: that.time
				}).then(res => {
					if (res.code == 1) {
						that.order_nums = res.data.order_nums;
						that.goods_nums = res.data.goods_nums;
						that.bonus_money = res.data.bonus_money.toFixed(2);
						that.statisList = res.data.lists;
						that.district = res.data.other.district;
						that.service = res.data.other.service;
						that.service.servi_price=that.service.servi_price.toFixed(2);
					}
				})
			},

		}
	}
</script>

<style lang="less">
	.top {
		width: 100%;
		height: 352rpx;
		color: #Fff;
		box-sizing: border-box;
		padding: 40rpx 30rpx;

		.bg {
			top: 0;
			left: 0;
			z-index: 1;
			position: absolute;
			background: url('http://cdn1.cheyizhuan.com/uploads/bank/1000.png-t.m75xx');
			background-size: cover;
			background-position: 0rpx -140rpx;
		}

		.info {
			top: 0;
			left: 0;
			position: absolute;
			padding: 33rpx;
			z-index: 2;
		}

		.shopInfo {
			font-size: 24rpx;
			margin: 50rpx 0 40rpx 0;
		}

		.down {
			position: absolute;
			left: 180rpx;
			top: 30rpx;
			font-size: 36rpx;
			color: #fff;

		}

		.money {
			font-size: 30rpx;

			text {
				font-size: 60rpx;
			}
		}

	}

	.total {
		display: flex;
		padding: 20rpx 0;

		&>view {
			flex: 1;
			text-align: center;

			text {
				display: block;

				&:nth-child(1) {
					font-size: 30rpx;
					color: #E41805;
					line-height: 54rpx;
				}

				&:nth-child(2) {
					font-size: 24rpx;
					color: #333;
				}
			}
		}
	}

	.monthMsg {
		padding: 30rpx;
		background-color: #f8f8f8;

		.title {
			font-size: 32rpx;
			color: #333;
		}

		.monthtotal {
			font-size: 24rpx;
			color: #999;
			margin-top: 15rpx;

			text {
				float: right;
			}
		}
	}

	.statisList {
		.list {
			padding: 30rpx;

			.name {
				font-size: 30rpx;
				color: #333;

				text {
					&:nth-child(2) {
						float: right;
					}
				}
			}

			.time {
				margin-top: 19rpx;
				color: #999;
				font-size: 24rpx;
			}
		}

	}
</style>
